import React, { Component } from 'react'
import { NavBar, Carousel } from 'antd-mobile';
import "./home.scss"
import SearchInput from "../searchInput/SearchInput"
import axios from "axios"
import { withRouter } from "react-router-dom"

class Home extends Component {
  state = {
    swiper_data: [],
    imgHeight: 170,
    nav_data: [],
    category_data: []
  };
  //点击轮播图
  handleClickSwiper = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id)
  }
  //点击分类导航
  handleNavListItemClick = (props) => {
    this.props.history.push("/category")
  }
  //点击分类列表
  handleImgListItemClick = (props) => {
    this.props.history.push("/goodList/query='123'")
  }
  componentDidMount() {
    // 请求轮播图
    axios.get("https://www.linweiqin.cn/api/public/v1/home/swiperdata")
      .then(res => {
        this.setState({
          swiper_data: res.data.message
        })
      });
    // 请求导航图
    axios.get("https://www.linweiqin.cn/api/public/v1/home/catitems")
      .then((res) => {
        this.setState({
          nav_data: res.data.message
        })
      });
    // 请求分类
    axios.get("https://www.linweiqin.cn/api/public/v1/home/floordata")
      .then(res => {
        this.setState({
          category_data: res.data.message
        })
      })

  }
  render() {
    return (
      <div className="ygHome">
        {/* 头部 */}
        <div className="ygHomeNav">
          <NavBar className="Nav">首页</NavBar>
        </div>
        {/* 搜索框 */}
        <div className="ygHomeSearch">
          <SearchInput></SearchInput>
        </div>
        {/* 轮播图 */}
        <div className="ygHomeSwiper">
          <Carousel
            autoplay={false}
            infinite
          >
            {this.state.swiper_data.map(val => (
              <div
                key={val.goods_id}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                onClick={this.handleClickSwiper.bind(this, val.goods_id)}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>

        </div>
        {/* 导航列表 */}
        <div className="ygNavList">
          <div className="ygNavListItem">
            {
              this.state.nav_data.map((v, i) =>
                <div onClick={this.handleNavListItemClick} key={v.name}>
                  <img className="navImg" src={v.image_src} alt="" />
                </div>
              )
            }
          </div>
        </div>
        {/* 分类列表 */}
        <div className="ygHomeCategory">
          {
            this.state.category_data.map((v, i) =>
              <div className="ygHomeCategoryList" key={i}>
                <div className="categoryListHeader">
                  <img src={v.floor_title.image_src} alt="" />
                </div>
                <div className="imgList">
                  {
                    v.product_list.map((v_pro) =>
                      <div className="imgListItem" key={v_pro.image_src} onClick={this.handleImgListItemClick}>
                        <img src={v_pro.image_src} alt="" />
                      </div>
                    )
                  }
                </div>
              </div>
            )
          }
        </div>
      </div>
    )
  }
}
export default withRouter(Home)